<template>
  <div class="leftNav">
    <div class="leftHeader">
      <img src="../assets/logo.jpg" alt="logo">
      <span>无风云记账</span>
    </div>
    <!-- 这里放置左侧导航栏的代码 -->
    <el-menu
        class="navMenu"
        :default-active="curActiveIndex"
    >
      <el-menu-item index="1" @click="toOtherRoute('dashboard')">
        <span >工作台</span>
      </el-menu-item>
      <el-sub-menu index="2">
        <template #title>
          <span>个人记账</span>
        </template>
        <el-menu-item @click="toOtherRoute(item.route)" :index="item.index" v-for="item in personRoutes" :key="item.index">
          <span>{{item.name}}</span>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <span>公司记账</span>
        </template>
        <el-sub-menu :index="'3-'+item.index" v-for="item in companys" :key="item.name">
          <template #title>{{ handleName(item.name) }}</template>
          <el-menu-item :key="itemComp.route" v-for="itemComp in companyRoutes" @click="toCompanyRoute(itemComp.route, item.name)" :index="'3-'+item.index + '-' +itemComp.index">{{itemComp.name}}</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="4" @click="creatCompany">
        <span>创建新公司</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>

import {handleName, routerTo} from "@/utils/index.js";
import {getCurrentCompanyName, getCurrentRouteName, updateCurrentCompanyName} from "@/composition/useRouterLink.js";
import bus from "@/bus/mitt.js";
import {useCompanyListRef} from "@/composition/billSys/useAccount.js";
const typeRouterIndex = {
  'dashboard': '1',
  'personBill': '2-1',
  'personBillType': '2-2',
  'companyBill': (companyIndex) => `3-${companyIndex}-1`,
  'companyBillType': (companyIndex) => `3-${companyIndex}-2`,
  'companyUser': (companyIndex) => `3-${companyIndex}-3`,
  'companyDepot': (companyIndex) => `3-${companyIndex}-4`,
  'companyDepotRecord': (companyIndex) => `3-${companyIndex}-5`,
}; // 对应的index

const personRoutes = [
  {
    index: '2-1',
    name: '账单',
    route: 'personBill'
  },
  // {
  //   index: '2-2',
  //   name: '账单类型',
  //   route: 'personBillType'
  // },
];

const companyRoutes = [
  {
    index: '1',
    name: '账单',
    route: 'companyBill'
  },
  // {
  //   index: '2',
  //   name: '账单类型',
  //   route: 'companyBillType'
  // },
  {
    index: '3',
    name: '管理员工',
    route: 'companyUser'
  },
  {
    index: '4',
    name: '仓库',
    route: 'companyDepot'
  },
  {
    index: '5',
    name: '仓库记录',
    route: 'companyDepotRecord'
  },
];

const companys = useCompanyListRef();

// 前往公司路由时先记录公司的名称， 后续使用
const toCompanyRoute = (route, name) => {
  // 更新当前公司名称
  updateCurrentCompanyName(name);
  routerTo(route, 2);
};

// 前往正常路由
const toOtherRoute = (route) => {
  updateCurrentCompanyName('');
  routerTo(route, 10);
};



const curActiveIndex = ref('1');
const updateActiveMenu = (currentRouteName) => {
  if(getCurrentCompanyName()){
    // 如果是公司路由， 则需要获取当前公司对应的index
    let companyName = getCurrentCompanyName();
    const companyTemp = companys.value.find(item => item.name === companyName);
    if(!companyTemp) {
      curActiveIndex.value = '1';
      return;
    }
    curActiveIndex.value = typeRouterIndex[currentRouteName](companyTemp.index);
    return;
  }
  curActiveIndex.value = typeRouterIndex[currentRouteName];
};

const creatCompany = () => {
  bus.$emit('creatCompany', null);
};

onMounted(() => {
  updateActiveMenu(getCurrentRouteName());
  // 监听路由变化，改变当前激活的菜单
  bus.$on('routeChangeAfter', (to) => {
    // 获取当前路由的name)
    const currentRouteName = to.name;
    if(to.meta.type === 'company'){
      // 如果是公司路由， 则需要获取当前公司对应的index
      let companyName = getCurrentCompanyName();
      const companyTemp = companys.value.find(item => item.name === companyName);
      if(!companyTemp) {
        curActiveIndex.value = '1';
        return;
      }
      curActiveIndex.value = typeRouterIndex[currentRouteName](companyTemp.index);
      return;
    }
    curActiveIndex.value = typeRouterIndex[currentRouteName];
  });
});




</script>

<style scoped lang="scss">
.leftNav {
  max-width: 200px;
  width: 35%;
  height: 100%;
  background-color: $leftNav-bg-color;
  overflow: hidden;
  overflow-y: auto;

  .leftHeader {
    color: white;
    display: flex;
    flex-direction: row;
    //justify-content: center;
    align-items: center;
    padding: 10px;
    width: 100%;
    height: $header-height;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;

    img {
      width: 40px;
      margin-right: 10px;
    }
  }

  .navMenu {
    width: 100%;
    height: 100%;
    background-color: $leftNav-bg-color;
    border: 0;

    .el-sub-menu {
      :deep(.el-sub-menu__title) {
        color: $leftNav-text-color !important;
        background-color: $leftNav-bg-color;
        overflow: hidden;

        &:hover {
          background-color: $leftNav-bg-color;
        }
      }
    }

    .el-menu-item {
      background-color: $leftNav-bg-color;
      color: $leftNav-text-color;

      &:hover {
        color: $leftNav-text-active-color;
        background-color: $leftNav-bg-color;
      }

      &.is-active {
        color: $leftNav-text-active-color;
        background-color: $leftNav-bg-active-color;
      }
    }

  }
}

@media screen and (max-width: 768px) {
  .leftNav {
    .leftHeader {
      font-size: 12px;
      padding: 5px;
      img {
        width: 8vw;
      }
    }
  }
}
</style>
